<template>
  <div class="ppm-box ppm-core-wrap" style="box-shadow: none">
    <el-form
      ref="ppmRef"
      :model="formData"
      :rules="ruleData.rules"
      label-width="100px"
    >
      <template v-for="(struct, index) in pageData">
        <!-- 0:基础模版 -->
        <template v-if="struct.formStruct">
          <!-- <PPMForm :structData="struct.formStruct" :formData="formData" :ruleData="ruleData" :key="index"></PPMForm> -->
          <component
            :is="proName"
            :structData="struct.formStruct"
            :formData="formData"
            :ruleData="ruleData"
            :key="index"
          ></component>
        </template>
        <!-- 1:tab: 配置页面时,都是先拉一个基本模板, 对应着报文中的formStruce 所以这段代码貌似用不到-->
        <template v-if="struct.tabStruct && struct.tabStruct.length > 0">
          <PPMTab
            :structData="struct"
            :formData="formData"
            :ruleData="ruleData"
            :key="index"
          ></PPMTab>
        </template>
      </template>
    </el-form>
    <slot name="footer" v-if="isBtnShow">
      <el-row type="flex" justify="center" style="margin-top: 20px">
        <el-button @click="goback">{{ btnTextLF }}</el-button>
        <el-button type="primary" @click="handleSumbit">{{
          btnTextRg
        }}</el-button>

        <!-- <el-button type="text" @click="preview">提交预览</el-button> -->
      </el-row>
    </slot>
  </div>
</template>

<script>
import "@/crm3.0part7-ppm/styles/index.css";
import { mapMutations } from "vuex";
export default {
  name: "PPMPage",
  props: {
    tempId: {
      type: Number,
      default: undefined,
    },
    formData: {
      type: Object,
    },
    pageData: {
      type: Array,
    },
    params: {
      type: Object,
    },
    isBtnShow: {
      type: Boolean,
      default: true,
    },
    btnTextLF: {
      type: String,
      default: "返回",
    },
    btnTextRg: {
      type: String,
      default: "保存",
    },
  },
  data() {
    return {
      ruleData: {
        ppm: null,
        rules: {},
      },
      pageModel: [],
      paramModel: {},
      proName: "",
      cacheRules: null,
    };
  },
  components: {
    PPMForm: () => import("./ppmForm"),
    PPMTab: () => import("./ppmTab"),
  },
  created() {
    this.proName = sessionStorage.getItem("proName") || "PPMForm";
  },
  mounted() {
    this.ruleData.ppm = this;
  },
  methods: {
    ...mapMutations("app", ["SET_PPM_REF"]),

    handleSumbit() {
      console.log(this.ruleData.rules);
      console.log(this.formData);
      this.$refs["ppmRef"].validate((valid, object) => {
        if (valid) {
          this.$emit("on-sumbit", this.paramModel);
        } else {
          let result = Object.values(object);
          this.$notify.error({
            title: "校验失败",
            message: result[0][0].message,
          });
        }
      });
    },

    validLoad() {
      //ppm规则验证，其他页面solt自定义提交事件引用 add by cjj 20210815
      console.log(this.ruleData.rules);
      console.log(this.formData);
      let flag = "";
      this.$refs["ppmRef"].validate((valid, object) => {
        if (valid) {
          console.log("999999");
          flag = "1";
        } else {
          let result = Object.values(object);
          this.$notify.error({
            title: "校验失败",
            message: result[0][0].message,
          });
          flag = "2";
        }
      });
      return flag;
    },

    preview() {
      this.$emit("preview", this.paramModel);
    },
    goback() {
      this.$emit("goback", this.paramModel);
    },
  },
};
</script>
